htmlレンダリング: 実装方法を考える

今回実装したい開発者のインターフェース

code: examples/playground/src/main.ts

import { createApp, h } from 'vue'

const app = createApp({

render() {

return h('div', {}, [

])

},

})

app.mount('#app')

↑ vueのh関数 (実際は色々は記法で書ける)

第一引数: htmlタグ

第二引数: 属性

第三引数: 子要素

どうやって実装しよう?

上記インター フェースからわかること

render関数の戻り値として扱っている

h関数がなにかしらのオブジェクトを返して、内部でその結果を利用している

h関数の戻り値はどうするのがいい?

code: ts

上記のようなシンプルなh関数の場合

code: typescript

const result = {

type: 'div', // タグ

props: { class: 'container' }, // 属性

}

こんな感じのオブジェクトを返すようにすれば、これをもとにDOM操作をして画面にレンダリングができそう!

イメージ ↓

code: typescript

const app: App = {

mount(rootContainer: HostElement) {

const node = rootComponent.render!() // nodeが上記のresultに相当 (これが仮装DOMと呼ばれる)

render(node, rootContainer) // nodeをもとにDOM操作!

},

}